<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":"授予菜单和权限"}){} %>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container">
        <div class="layui-card">
        <div class="layui-card-body">
          <t-form :data="queryForm" label-width="calc(5em + 20px)" layout="inline" colon>
            <t-form-item label="名称" name="nameLike">
              <t-input v-model="queryForm.name" placeholder="输入名称" clearable></t-input>
            </t-form-item>
            <t-form-item label="编码" name="codeLike">
              <t-input v-model="queryForm.codeLike" placeholder="输入编码" clearable></t-input>
            </t-form-item>
            <t-button theme="primary" @click="fetchData">
              <template #icon><i class="layui-icon layui-icon-search text-size-14 mr-10"></i></template>
              查询
            </t-button>
          </t-form>
        </div>
      </div>
      <div class="layui-row layui-col-space10">
        <div class="layui-col-sm8">
          <div class="layui-card">
            <div class="layui-card-body">
              <t-table :columns="columns" :data="table.data" :loading="table.loading" bordered hover resizable>
                <template #loading>
                  <div class="t-table--loading-message">加载数据中，请稍后...</div>
                </template>
              </t-table>
              <div class="pa-25 pb-15">
                <t-pagination v-model="queryForm.pageNumber" v-model:page-size="queryForm.pageSize" :total="table.totalRow" show-first-and-last-page-btn show-jumper
                              :show-page-number="false" @change="queryData"></t-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-sm4">
          <div class=" layui-card">
            <div class="layui-card-body">
              <t-skeleton :loading="loading">
                <t-space>
                  <t-tag v-for="(item,index) in ownRoleData" :key="item.roleId" theme="primary" size="large" closable @close="deselect(index)">{{item.roleName}}</t-tag>
                </t-space>
              </t-skeleton>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container">
      <t-button :loading="loading" theme="primary" @click="onSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "sys/userRole/";
  const ROLE_URL = "sys/role/";
</script>

<script>

  setupVue("#app", {
    setup() {
      const loading = Vue.ref(true);

      // 角色选项
      const queryForm = Vue.ref({ pageNumber: 1, pageSize: 10, columnField: "id,name,code,sort", status: "1" })
      const table = useTable();
      const fetchData = () => fetchPage(axiosGet, ROLE_URL + "page", queryForm, table);
      const queryData = (info = {}) => {
        Vue.nextTick(() => {
          const { current = 1, pageSize } = info;
          queryForm.pageNumber = current;
          if (pageSize) queryForm.pageSize = pageSize;
          fetchData();
        });
      }

      // 获取用户拥有的角色
      const ownRoleData = Vue.ref([]);
      const ownRole = () => {
        $fetch(axiosGet, PATH_URL + "ownRole", { userId: USER_ID }, ownRoleData, null, loading);
      }
      const ownRoleIds = Vue.computed(() => ownRoleData.value.map(item => item.roleId))

      // 选择
      const choice = (row) => {
        const index = ownRoleIds.value.findIndex(item => item === row.id);
        if (index === -1) {
          ownRoleData.value.push({ roleId: row.id, roleName: row.name })
        } else {
          ownRoleData.value.splice(index, 1)
        }
      }
      // 取消选择
      const deselect = (index) => ownRoleData.value.splice(index, 1)

      // 保存
      const onSave = () => {
        $fetch(axiosPost, PATH_URL + "saveUserRole", { userId: USER_ID, roleJson: JSON.stringify(ownRoleData.value) }, null, (res) => {
          $baseAlert(res.msg, () => {
            if (res.code === 200) closeLayer();
          })
        }, loading)
      }

      // 初始化
      const USER_ID = getLayerData("userId");
      init(() => {
        if (USER_ID) {
          ownRole();
          fetchData();
        } else {
          $baseAlert("未找到角色标识", () => closeBtn.value.close())
        }
      });


      // 表格列表显示
      const columns = [
        { colKey: 'serial-number', align: 'center', title: '序', width: "30px" },
        { colKey: 'name', title: '名称', align: 'center', width: '160px', ellipsis: true },
        { colKey: 'code', title: '编码', align: 'center', width: '160px', ellipsis: true },
        {
          colKey: 'sort', title: '排序', align: 'center', width: '80px', cell: (h, { row }) => {
            return h(TDesign.Tag, { variant: 'light-outline' }, row.sort)
          },
        },
        {
          title: '操作',
          align: 'center', width: '100px',
          cell: (h, { row }) => {
            if (ownRoleIds.value.includes(row.id)) {
              return h(TDesign.Link, { theme: 'danger', onClick: () => choice(row) }, '取消');
            } else {
              return h(TDesign.Link, { theme: 'primary', onClick: () => choice(row) }, '选择');
            }
          },
        },
      ];

      const closeBtn = useCloseBtn();
      return {
        closeBtn,
        queryForm, table, columns, ownRoleData, ownRoleIds, queryData,
        onSave, loading,
        choice, deselect,
      }

    },
  });
</script>


</body>
</html>
